// src/pages/home/index.tsx - 主页面
import React, { useState } from 'react';
import { Card, Button, Alert } from 'antd';
import { get } from '@/api';

const HomePage: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  const handleCallAPI = async () => {
    setLoading(true);
    setError(null);
    setResult(null);
    
    try {
      const response = await get('');
      setResult(response.data);
    } catch (err: any) {
      setError(err.message || '请求失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card title="主页">
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
        <Button 
          onClick={handleCallAPI} 
          loading={loading}
          type="primary"
        >
          调用根路径接口
        </Button>
        
        {result && (
          <div style={{ flex: 1 }}>
            <pre style={{
              background: '#f5f5f5',
              padding: '8px',
              borderRadius: '4px',
              whiteSpace: 'pre-wrap',
              wordBreak: 'break-all',
              margin: 0
            }}>
              {JSON.stringify(result, null, 2)}
            </pre>
          </div>
        )}
      </div>
      
      {error && (
        <Alert 
          message="错误" 
          description={error} 
          type="error" 
          showIcon 
        />
      )}
    </Card>
  );
};

export default HomePage;